<!--
@description    表格展示
@author         秦俊强
@email          458112865@qq.com
@create         2021-06-07
-->

<template>
  <div class="content">
    <el-table :data="tableData" style="width: 100%;" max-height="600"
              row-key="id" border stripe highlight-current-row
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">

      <el-table-column v-for="(item, index) in tableHead"
                       :key="index" :label="item.label" :property="item.prop"
                       :align="index > 1 ? 'right' : ''"
                       :width="index === 0 ? '45px' : ''">
        <template slot-scope="scope">
          <div v-if="isArray(scope.row[scope.column.property])">
            <div v-for="(item, ind) in scope.row[scope.column.property]"
                 :key="ind" :style="{ color: ind === 1 ? '#0AA372' : '' }">{{ item }}</div>
          </div>

          <div v-else>{{ scope.row[scope.column.property] }}</div>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>



<script>

  export default {
    name: 'table-funnel',

    props: {
      funnelReportResData: {
        type: Object,
        default: null
      }
    },

    data() {
      return {

        tableHead: [
          { prop: '', label: '' },

          { prop: 'title', label: '', sortable: true },
          { prop: 'ALL', label: '总体转化', sortable: true },
          { prop: 'commodityDetail', label: '浏览商口详情', sortable: true },
          { prop: 'step1', label: '第 1 步转化', sortable: true },
          { prop: 'step2', label: '第 2 步转化', sortable: true },
          { prop: 'step3', label: '第 3 步转化', sortable: true },
        ],

        tableData: [

          {
            id: 1,
            title: '总体',
            ALL: '88',
            commodityDetail: '01',
            step1: [1, 2],
            step2: '0102',
            step3: '0103',

            children: [
              {
                id: '1-1',
                title: '20210101',
                ALL: '77',
                commodityDetail: '01-01',
                step1: '0101-01',
                step2: '0102-02',
                step3: '0103-03',
              },
              {
                id: '1-2',
                title: '20210102',
                ALL: '66',
                commodityDetail: '01-02',
                step1: '0101-04',
                step2: '0102-05',
                step3: '0103-06',
              }
            ]
          }

        ],

      }
    },

    created() {
      let t = this;

      t.$watch('funnelReportResData', () => {
        // console.log('funnelReportResData = ', t.funnelReportResData);
        // console.log('funnelDetail = ', t.funnelReportResData.funnelDetail);

        t.tableHead = [];
        t.tableData = [];

        t.initTabHead();
      });
    },

    methods: {

      /* 判断是否是数组 */
      isArray: (a) => {
        return (Object.prototype.toString.call(a) === '[object Array]');
      },


      /* 初始化表头 */
      initTabHead() {
        let t = this;
        let eventNames = t.funnelReportResData.eventNames;

        for (let i = 0; i < eventNames.length; i++) {
          if (i === 0) {
            t.tableHead.push({ prop: '', label: '' });              // 折叠展开箭头

            t.tableHead.push({ prop: 'title', label: '' });
            t.tableHead.push({ prop: 'ALL', label: '总体转化' });
            t.tableHead.push({ prop: eventNames[i].name, label: eventNames[i].cname });
          } else {
            t.tableHead.push({ prop: eventNames[i].name + i, label: '第 ' + i + ' 步转化' });
          }
        }
        t.initTabData();
      },

      /* 返回数组字符串 例：['a', null] => 'a, null' */
      getByValuesListStr(arr) {
        let str = '';

        for (let i = 0; i < arr.length; i++) {
          let val = arr[i];
          str = str + val + ((i === arr.length - 1) ? '' : ', ');
        }

        return str;
      },

      /* 初始化表身数据 */
      initTabData() {
        let t = this;

        let byValues = t.funnelReportResData.byValues;
        let byValuesList = t.funnelReportResData.byValuesList;
        let funnelDetail = t.funnelReportResData.funnelDetail;
        let dateList = t.funnelReportResData.dateList;

        let eventNames = t.funnelReportResData.eventNames;
        let key = eventNames[eventNames.length - 1].name +(eventNames.length-1);

        // 表身数据 byValues 的 length 表示一共有多少主行数
        for (let i = 0; i < byValues.length; i++) {
          let tabTem = t.getTabTem(true);

          if (byValues[i] === '$ALL') {
            tabTem.title = '总体';
          } else {
            tabTem.title = t.getByValuesListStr(byValuesList[i]);
          }

          // 主行数 + 子行数
          for (let j = 0; j < funnelDetail.length; j++) {
            let cTabTem = t.getTabTem();
            let cItem = funnelDetail[j].overview[i];

            if (j === 0) {
              tabTem = t.getRowData(tabTem, cItem);
              continue;
            }

            cTabTem.title = dateList[j];
            cTabTem = t.getRowData(cTabTem, cItem);
            cTabTem['ALL'] = cTabTem[key];

            tabTem.children.push(cTabTem);
          }

          tabTem['ALL'] = tabTem[key];
          t.tableData.push(tabTem);
        }

        // console.log('tableHead = ', t.tableHead);
        // console.log('tableData = ', t.tableData);
      },

      /* 返回表格行 */
      getRowData(resData, overview) {
        let eventNames = this.funnelReportResData.eventNames;

        for (let i = 0; i < eventNames.length; i++) {
          let item = overview[i];
          let k = eventNames[i].name;
          if (i === 0) {
            resData[k] = item.convertedUser;
          } else {
            k = k + i;
            resData[k] = [item.convertedUser, item.completionRate + '%'];
          }
        }
        return resData;
      },

      /* 返回表身数据模板 */
      getTabTem(b) {
        let tabTem = {};

        for (let i = 0; i < this.tableHead.length; i++) {
          let item = this.tableHead[i];

          // 标识唯一 id，方便折叠展开，和点击高亮行
          tabTem['id'] = Number(Math.random().toString().substr(3, 10) + Date.now()).toString(36);

          if (item.prop) { tabTem[item.prop] = ''; }

          if (b) { tabTem['children'] = []; }
        }

        return tabTem;
      },

    },

  }
</script>



<style scoped lang="scss">
/deep/.el-table tbody td { padding: 5px 0; }
</style>
